<template>
  <div class="dashboard-container">
    <div class="container">
      <!-- 搜索栏 -->
      <div class="tableBar">
        <el-form :inline="true" @submit.prevent="handleSearch">
          <el-form-item label="员工姓名：">
            <el-input v-model="searchForm.name" placeholder="请输入员工姓名" clearable @clear="handleSearch" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-btn" @click="handleSearch" :loading="loading">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="tableLab">
          <el-button type="primary" @click="addEmployeeHandle()">+ 添加员工</el-button>
        </div>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" stripe class="tableBox">
        <el-table-column prop="name" label="员工姓名" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column label="账号状态">
          <template #default="{ row }">
            <div class="tableColumn-status" :class="{ 'stop-use': row.status === 0 }">
              <span :class="row.status === 1 ? 'status-dot-enabled' : 'status-dot-disabled'"></span>
              {{ row.status === 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间" min-width="150" />
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="addEmployeeHandle(row.id)"
              :disabled="row.username === 'admin'"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              :class="row.status === 0 ? 'blueBug' : 'delBut'"
              @click="handleStatusChange(row)"
              :disabled="row.username === 'admin'"
            >
              {{ row.status === 0 ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-if="total > 0"
        class="pageList"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:current-page="page"
        v-model:page-size="pageSize"
        @current-change="fetchData"
        @size-change="fetchData"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getEmployeePage, updateEmployeeStatus } from '@/api/employee';
import type { IEmployee, IEmployeePageQuery } from '@/types/employee';
import Empty from '@/components/Empty/index.vue';

const router = useRouter();
const loading = ref(false);
const searchForm = reactive({ name: '' });
const tableData = ref<IEmployee[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const fetchData = async () => {
  loading.value = true;
  try {
    const params: IEmployeePageQuery = {
      page: page.value,
      pageSize: pageSize.value,
      name: searchForm.name || undefined,
    };
    const response = await getEmployeePage(params);
    tableData.value = response.data.records;
    total.value = response.data.total;
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  page.value = 1;
  fetchData();
};

const addEmployeeHandle = (id?: number) => {
  if (id) {
    router.push({ name: 'EmployeeEdit', params: { id } });
  } else {
    router.push({ name: 'EmployeeAdd' });
  }
};

const handleStatusChange = (row: IEmployee) => {
  if (row.username === 'admin') return;
  const newStatus = row.status === 0 ? 1 : 0;
  ElMessageBox.confirm(`确认要${newStatus === 1 ? '启用' : '禁用'}【${row.name}】的账号吗?`, '提示', { type: 'warning' }).then(async () => {
    await updateEmployeeStatus({ id: row.id, status: newStatus });
    ElMessage.success('账号状态更改成功！');
    fetchData();
  });
};

onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
/* 样式与 category/index.vue 类似，保持统一 */
.dashboard-container { padding: 20px; }
.container { background: #fff; padding: 30px 28px; border-radius: 4px; }
.tableBar { display: flex; justify-content: space-between; margin-bottom: 20px; }
.tableLab { display: flex; align-items: center; }
.tableBox { width: 100%; }
.pageList { margin-top: 30px; display: flex; justify-content: center; }
.search-btn { background-color: #333; color: white; }
.tableColumn-status {
  display: flex;
  align-items: center;
  .status-dot-enabled { width: 8px; height: 8px; background-color: #67c23a; border-radius: 50%; margin-right: 5px; }
  .status-dot-disabled { width: 8px; height: 8px; background-color: #f56c6c; border-radius: 50%; margin-right: 5px; }
  &.stop-use { color: #f56c6c; }
}
.blueBug { color: #3370ff; }
.delBut { color: #f56c6c; }
</style>
